<template>
    <div class="column">
        <div class="column-header">
            <div class="column-header-left">
                <el-input placeholder="请输入关键字" v-model="selectNewsname" />
                <el-button type="primary" @click="selectNews"><el-icon>
                        <Search />
                    </el-icon>查询</el-button>
            </div>
            <div class="column-header-right">
                <el-button type="primary" @click="addcategory"><el-icon>
                        <CirclePlus />
                    </el-icon>添加栏目</el-button>
                <el-input placeholder="在本页检索" v-model="search" />
            </div>
        </div>
        <div class="column-table">
            <el-table :data="filterTableData" :border="true" :height="tableHeight" style="width: 100%">
                <el-table-column property="categoryId" label="栏目序号" width="120" align="center" />
                <el-table-column property="categoryName" label="栏目名称" width="120" align="center" />
                <el-table-column property="categoryDesc" label="栏目描述" align="center" />
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"><el-icon>
                                <EditPen />
                            </el-icon></el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"><el-icon>
                                <Delete />
                            </el-icon></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="column-footer">
            <el-pagination small background layout="total, prev, pager, next" :page-size="50" :total="totals"
                @current-change="handleCurrentChange" />
        </div>
        <el-dialog v-model="dialogFormVisible" title="编辑栏目">
            <el-form :model="form">
                <el-form-item label="栏目名称：">
                    <el-input v-model="form.categoryName" />
                </el-form-item>
                <el-form-item label="栏目描述：">
                    <el-input v-model="form.categoryDesc" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="Updatecategory">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogFormVisible2" title="添加栏目">
            <el-form :model="form2">
                <el-form-item label="栏目名称：">
                    <el-input v-model="form2.categoryName" />
                </el-form-item>
                <el-form-item label="栏目描述：">
                    <el-input v-model="form2.categoryDesc" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="subcategory">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue'
import api from '../../api/api';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, EditPen, Search, CirclePlus } from '@element-plus/icons-vue'

const search = ref('')

const tableData = ref<any[]>([])

const totals = ref(0)

const selectNewsname = ref('')

const dialogFormVisible = ref(false)

const dialogFormVisible2 = ref(false)


const currentpage = ref(0)

let tableHeight = ref(window.innerHeight - 236)


const form = reactive({
    categoryId: 0,
    categoryName: '',
    categoryDesc: ''
})

const form2 = reactive({
    categoryId: 0,
    categoryName: '',
    categoryDesc: ''
})

const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.categoryName.toLowerCase().includes(search.value.toLowerCase())
    )
)


const selectNews = () => {
    if (selectNewsname.value == '') {
        initcolumn()
    } else {
        let getcategoryId = 0
        tableData.value.forEach((item) => {
            if (selectNewsname.value == item.categoryName) {
                getcategoryId = item.categoryId
            }
        })
        api.selectcategoryId(getcategoryId)
            .then(res => {
                if (res.data.code == 200) {
                    ElMessage({
                        message: '查询栏目成功',
                        type: 'success'
                    })
                    tableData.value = res.data.data
                    totals.value = res.data.data.length
                }
            }).catch(err => console.log(err))
    }
}

const initcolumn = () => {
    api.selectallcategory()
        .then(res => {
            if (res.data.code == 200) {
                totals.value = res.data.data.length
                tableData.value = res.data.data
            }
        }).catch(err => console.log(err))
}


const Updatecategory = () => {
    dialogFormVisible.value = false
    let subform = {}
    tableData.value.forEach((item) => {
        if (item.categoryId == form.categoryId) {
            form.categoryName = item.categoryName != form.categoryName ? form.categoryName : ''
            form.categoryDesc = item.categoryDesc != form.categoryDesc ? form.categoryDesc : ''
        }
    })
    if (form.categoryName != '' && form.categoryDesc != '') {
        subform = { categoryId: form.categoryId, categoryName: form.categoryName, categoryDesc: form.categoryDesc }
    } else if (form.categoryName == '' && form.categoryDesc != '') {
        subform = { categoryId: form.categoryId, categoryDesc: form.categoryDesc }
    } else if (form.categoryName != '' && form.categoryDesc == '') {
        subform = { categoryId: form.categoryId, categoryName: form.categoryName }
    } else {
        subform = { categoryId: form.categoryId }
    }
    api.updatecategory(subform)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '修改栏目成功',
                    type: 'success'
                })
                handleCurrentChange(1)
            }
        }).catch(err => console.log(err))
}

const handleDelete = (index: number, row: any) => {
    ElMessageBox.confirm(
        `你确认要删除第${row.categoryId}个栏目吗？`,
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            api.deletecategory({ categoryName: row.categoryName })
                .then(res => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: '删除栏目成功',
                            type: 'success'
                        })
                        handleCurrentChange(1)
                    }
                }).catch(err => console.log(err))
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}

const handleEdit = (index: number, row: any) => {
    dialogFormVisible.value = true
    form.categoryId = row.categoryId
    form.categoryName = row.categoryName
    form.categoryDesc = row.categoryDesc
}


const addcategory = () => {
    dialogFormVisible2.value = true
}

const subcategory = () => {
    dialogFormVisible2.value = false
    api.addcategory(form2)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '添加栏目成功',
                    type: 'success'
                })
                handleCurrentChange(1)
            }
        }).catch(err => console.log(err))
}

const handleCurrentChange = (val: number) => {
    currentpage.value = val
    initcolumn()
}

onMounted(() => {

    handleCurrentChange(1)

    window.onresize = () => {
        tableHeight.value = window.innerHeight - 236
    }
})

</script>

<style scoped>
.column-header {
    display: flex;
    justify-content: space-between;
}



.column-header-left {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
}

.column-header-left .el-button {
    margin-left: 15px;
}

.column-header-right {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
}

.column-header-right .el-button {
    margin-right: 15px;
}

.column {
    background-color: #fcfffc;
    border-radius: 10px;
}


.column-footer {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.column-table {
    padding: 10px;
    box-sizing: border-box;
    height: calc(100% - 3rem);
}
</style>